<!--created by yuyupeng-->
<!--2023/04/06-->
<!-- 路由管理-->
<template>
  <div class="list-card-container">
    <a-card title="路由管理" class="general-card">
      <!-- 查询表单 -->
      <AdvancedSearch
        ref="searchRef"
        :data-source="searchItemList"
        @change="searchByParams"
      />
      <a-space style="margin-top: 5px; margin-bottom: 5px">
        <a-button type="primary" @click="showAddModal"
          ><icon-plus />新增路由</a-button
        >
        <!--        <a-popconfirm
          content="确定删除吗?"
          type="warning"
          @ok="deleteTbDataList(selectedKeys)"
        >
          <a-button :disabled="selectedKeys.length === 0"
            ><icon-delete />批量删除</a-button
          >
        </a-popconfirm>-->
      </a-space>
      <!-- 表格 -->
      <a-table
        v-model:selectedKeys="selectedKeys"
        row-key="id"
        column-resizable
        :columns="tbCols"
        :data="tbData"
        :row-selection="rowSelection"
        :pagination="pagination"
        :loading="tbLoading"
        :scroll="{ x: '100%', y: 600 }"
        :scrollbar="true"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <!-- 插槽-路由详情 -->
        <!--        <template #detail="{ record }">
          <a-link type="text" @click="showDetailDrawer(record)"> 详情 </a-link>
        </template>-->
        <!-- 插槽-一键复制 -->
        <template #quickCopyToolTip="{ record, column }">
          <quick-copy-tool-tip
            :show-text="record[column['dataIndex']]"
            show-btn
          />
        </template>
        <!-- 插槽-条件 -->
        <template #predicates="{ record }">
          {{ getPredicatesName(record.predicates) }}
        </template>
        <!-- 插槽-过滤器 -->
        <template #filters="{ record }">
          {{ getFiltersName(record.filters) }}
        </template>
        <!-- 插槽-metadata -->
        <template #metadata="{ record }">
          {{ record.metadata.remark }}
        </template>
        <!-- 插槽-操作 -->
        <template #operation="{ record }">
          <a-space>
            <a-link type="text" @click="showEditDrawer(record)"> 修改 </a-link>
            <a-popconfirm
              content="确定删除吗?"
              type="warning"
              @ok="deleteTbData(record.id)"
            >
              <a-link type="text">删除</a-link>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <!-- 路由详情 -->
    <AdvancedDrawer
      ref="showDrawerRef"
      click="link"
      title="路由详情"
      clickword=""
      :narrow="true"
      :data-source="showDrawerConfig"
      :data-record="currentRecord"
    />
    <!-- 修改路由信息弹窗 -->
    <AdvancedFormModal
      ref="editModalRef"
      width="1000px"
      title="修改路由信息"
      :colon="false"
      :submit-with-close="false"
      :items="editModalConfig"
      :rules="advancedModalRules"
      @ok="editModalSubmit"
    >
      <!-- 插槽-条件 -->
      <template #predicates>
        <a-card :style="{ width: '100%' }" title="条件" size="small">
          <template #extra>
            <a-popover content="添加条件">
              <icon-plus-circle-fill size="24" @click="handleAddPredicate" />
            </a-popover>
          </template>
          <a-form :model="predicatesForm" :style="{ width: '100%' }">
            <a-row
              v-for="(predicate, index) of predicatesForm.predicate"
              :key="index"
              :gutter="8"
            >
              <a-col :span="10">
                <a-form-item
                  :field="`predicate[${index}].value`"
                  label="条件名称"
                  hide-label
                >
                  <a-select
                    v-model="predicate.type"
                    :options="predicatesNameOptions"
                    placeholder="请选择条件名称..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item
                  v-if="predicate.type === ''"
                  label="参数"
                  hide-label
                >
                  <a-input placeholder="请输入..." />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Path'"
                  :field="`predicate[${index}].pathValue`"
                  label="参数"
                  hide-label
                >
                  <a-input
                    v-model="predicate.pathValue"
                    placeholder="多条路径请用英文逗号隔开，如/red/{segment},/blue/{segment}"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Before'"
                  :field="`predicate[${index}].beforeValue`"
                  label="参数"
                  hide-label
                >
                  <a-date-picker
                    v-model="predicate.beforeValue"
                    style="width: 100%"
                    placeholder="请选择日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    show-time
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'After'"
                  :field="`predicate[${index}].afterValue`"
                  label="参数"
                  hide-label
                >
                  <a-date-picker
                    v-model="predicate.afterValue"
                    style="width: 100%"
                    placeholder="请选择日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    show-time
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Between'"
                  :field="`predicate[${index}].betweenValue`"
                  label="参数"
                  hide-label
                >
                  <a-range-picker
                    v-model="predicate.betweenValue"
                    style="width: 100%"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    show-time
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="predicate.type === 'Cookie'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`predicate[${index}].cookieValue`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="predicate.cookieValue.key"
                          placeholder="请输入key，如chocolate"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`predicate[${index}].cookieValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="predicate.cookieValue.value"
                          placeholder="请输入value，如ch.p"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeletePredicate(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <div v-if="predicate.type === 'Header'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`predicate[${index}].headerValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="predicate.headerValue.key"
                          placeholder="请输入name，如X-Request-Id"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`predicate[${index}].headerValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="predicate.headerValue.value"
                          placeholder="请输入正则表达式，如\d+"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeletePredicate(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <a-form-item
                  v-if="predicate.type === 'Host'"
                  :field="`predicate[${index}].hostValue`"
                  label="参数"
                  hide-label
                >
                  <a-input
                    v-model="predicate.hostValue"
                    placeholder="多个Host请用英文逗号隔开，如**.somehost.org,**.anotherhost.org"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Method'"
                  :field="`predicate[${index}].methodValue`"
                  label="参数"
                  hide-label
                >
                  <a-select
                    v-model="predicate.methodValue"
                    :options="httpMethodOptions"
                    :multiple="true"
                    placeholder="请选择"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="predicate.type === 'Query'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`predicate[${index}].queryValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="predicate.queryValue.key"
                          placeholder="请输入参数..."
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`predicate[${index}].queryValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="predicate.queryValue.value"
                          placeholder="请输入正则表达式..."
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeletePredicate(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <a-form-item
                  v-if="predicate.type === 'RemoteAddr'"
                  :field="`predicate[${index}].remoteAddrValue`"
                  label="参数"
                  hide-label
                >
                  <a-input
                    v-model="predicate.remoteAddrValue"
                    placeholder="请输入请求IP，如192.168.1.1/24"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
      </template>
      <!-- 插槽-过滤器 -->
      <template #filters>
        <a-card :style="{ width: '100%' }" title="过滤器" size="small">
          <template #extra>
            <a-popover content="添加过滤器">
              <icon-plus-circle-fill size="24" @click="handleAddFilter" />
            </a-popover>
          </template>
          <a-form :model="filtersForm" :style="{ width: '100%' }">
            <a-row
              v-for="(filter, index) of filtersForm.filter"
              :key="index"
              :gutter="8"
            >
              <a-col :span="10">
                <a-form-item
                  :field="`filter[${index}].value`"
                  label="过滤器名称"
                  hide-label
                >
                  <a-select
                    v-model="filter.type"
                    :options="filtersNameOptions"
                    placeholder="请选择过滤器名称..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item v-if="filter.type === ''" label="参数" hide-label>
                  <a-input placeholder="请输入..." />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeleteFilter(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="filter.type === 'AddRequestParameter'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].addRequestParameterValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.addRequestParameterValue.key"
                          placeholder="请输入key"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].addRequestParameterValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.addRequestParameterValue.value"
                          placeholder="请输入value"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <div v-if="filter.type === 'AddRequestHeader'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].addRequestHeaderValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.addRequestHeaderValue.key"
                          placeholder="请输入key"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].addRequestHeaderValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.addRequestHeaderValue.value"
                          placeholder="请输入value"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <div v-if="filter.type === 'AddResponseHeader'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].addResponseHeaderValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.addResponseHeaderValue.key"
                          placeholder="请输入key"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].addResponseHeaderValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.addResponseHeaderValue.value"
                          placeholder="请输入value"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <a-form-item
                  v-if="filter.type === 'PreserveHostHeader'"
                  :field="`filter[${index}].preserveHostHeaderValue`"
                  label="参数"
                  hide-label
                >
                  <a-input disabled placeholder="维持Host头" />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeleteFilter(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="filter.type === 'RewritePath'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].rewritePathValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.rewritePathValue.key"
                          placeholder="正则表达式"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].rewritePathValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.rewritePathValue.value"
                          placeholder="替换为"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
      </template>
    </AdvancedFormModal>
    <!-- 新增路由信息弹窗 -->
    <AdvancedFormModal
      ref="addModalRef"
      width="1000px"
      title="新增路由信息"
      :colon="false"
      :items="addModalConfig"
      :rules="advancedModalRules"
      :submit-with-close="false"
      @ok="addModalSubmit"
    >
      <!-- 插槽-条件 -->
      <template #predicates>
        <a-card :style="{ width: '100%' }" title="条件" size="small">
          <template #extra>
            <a-popover content="添加条件">
              <icon-plus-circle-fill size="24" @click="handleAddPredicate" />
            </a-popover>
          </template>
          <a-form :model="predicatesForm" :style="{ width: '100%' }">
            <a-row
              v-for="(predicate, index) of predicatesForm.predicate"
              :key="index"
              :gutter="8"
            >
              <a-col :span="10">
                <a-form-item
                  :field="`predicate[${index}].value`"
                  label="条件名称"
                  hide-label
                >
                  <a-select
                    v-model="predicate.type"
                    :options="predicatesNameOptions"
                    placeholder="请选择条件名称..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item
                  v-if="predicate.type === ''"
                  label="参数"
                  hide-label
                >
                  <a-input placeholder="请输入..." />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Path'"
                  :field="`predicate[${index}].pathValue`"
                  label="参数"
                  hide-label
                >
                  <a-input
                    v-model="predicate.pathValue"
                    placeholder="多条路径请用英文逗号隔开，如/red/{segment},/blue/{segment}"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Before'"
                  :field="`predicate[${index}].beforeValue`"
                  label="参数"
                  hide-label
                >
                  <a-date-picker
                    v-model="predicate.beforeValue"
                    style="width: 100%"
                    placeholder="请选择日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    show-time
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'After'"
                  :field="`predicate[${index}].afterValue`"
                  label="参数"
                  hide-label
                >
                  <a-date-picker
                    v-model="predicate.afterValue"
                    style="width: 100%"
                    placeholder="请选择日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    show-time
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Between'"
                  :field="`predicate[${index}].betweenValue`"
                  label="参数"
                  hide-label
                >
                  <a-range-picker
                    v-model="predicate.betweenValue"
                    style="width: 100%"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    show-time
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="predicate.type === 'Cookie'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`predicate[${index}].cookieValue`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="predicate.cookieValue.key"
                          placeholder="请输入key，如chocolate"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`predicate[${index}].cookieValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="predicate.cookieValue.value"
                          placeholder="请输入value，如ch.p"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeletePredicate(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <div v-if="predicate.type === 'Header'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`predicate[${index}].headerValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="predicate.headerValue.key"
                          placeholder="请输入name，如X-Request-Id"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`predicate[${index}].headerValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="predicate.headerValue.value"
                          placeholder="请输入正则表达式，如\d+"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeletePredicate(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <a-form-item
                  v-if="predicate.type === 'Host'"
                  :field="`predicate[${index}].hostValue`"
                  label="参数"
                  hide-label
                >
                  <a-input
                    v-model="predicate.hostValue"
                    placeholder="多个Host请用英文逗号隔开，如**.somehost.org,**.anotherhost.org"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <a-form-item
                  v-if="predicate.type === 'Method'"
                  :field="`predicate[${index}].methodValue`"
                  label="参数"
                  hide-label
                >
                  <a-select
                    v-model="predicate.methodValue"
                    :options="httpMethodOptions"
                    :multiple="true"
                    placeholder="请选择"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="predicate.type === 'Query'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`predicate[${index}].queryValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="predicate.queryValue.key"
                          placeholder="请输入参数..."
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`predicate[${index}].queryValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="predicate.queryValue.value"
                          placeholder="请输入正则表达式..."
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeletePredicate(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <a-form-item
                  v-if="predicate.type === 'RemoteAddr'"
                  :field="`predicate[${index}].remoteAddrValue`"
                  label="参数"
                  hide-label
                >
                  <a-input
                    v-model="predicate.remoteAddrValue"
                    placeholder="请输入请求IP，如192.168.1.1/24"
                  />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeletePredicate(index)"
                    />
                  </a-popover>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
      </template>
      <!-- 插槽-过滤器 -->
      <template #filters>
        <a-card :style="{ width: '100%' }" title="过滤器" size="small">
          <template #extra>
            <a-popover content="添加过滤器">
              <icon-plus-circle-fill size="24" @click="handleAddFilter" />
            </a-popover>
          </template>
          <a-form :model="filtersForm" :style="{ width: '100%' }">
            <a-row
              v-for="(filter, index) of filtersForm.filter"
              :key="index"
              :gutter="8"
            >
              <a-col :span="10">
                <a-form-item
                  :field="`filter[${index}].value`"
                  label="过滤器名称"
                  hide-label
                >
                  <a-select
                    v-model="filter.type"
                    :options="filtersNameOptions"
                    placeholder="请选择过滤器名称..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item v-if="filter.type === ''" label="参数" hide-label>
                  <a-input placeholder="请输入..." />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeleteFilter(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="filter.type === 'AddRequestParameter'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].addRequestParameterValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.addRequestParameterValue.key"
                          placeholder="请输入key"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].addRequestParameterValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.addRequestParameterValue.value"
                          placeholder="请输入value"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <div v-if="filter.type === 'AddRequestHeader'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].addRequestHeaderValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.addRequestHeaderValue.key"
                          placeholder="请输入key"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].addRequestHeaderValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.addRequestHeaderValue.value"
                          placeholder="请输入value"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <div v-if="filter.type === 'AddResponseHeader'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].addResponseHeaderValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.addResponseHeaderValue.key"
                          placeholder="请输入key"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].addResponseHeaderValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.addResponseHeaderValue.value"
                          placeholder="请输入value"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <a-form-item
                  v-if="filter.type === 'PreserveHostHeader'"
                  :field="`filter[${index}].preserveHostHeaderValue`"
                  label="参数"
                  hide-label
                >
                  <a-input disabled placeholder="维持Host头" />
                  <a-popover content="删除">
                    <icon-delete
                      size="20"
                      :style="{ marginLeft: '10px', color: 'red' }"
                      @click="handleDeleteFilter(index)"
                    />
                  </a-popover>
                </a-form-item>
                <div v-if="filter.type === 'RewritePath'">
                  <a-row :gutter="8">
                    <a-col :span="12">
                      <a-form-item
                        label="参数"
                        hide-label
                        :field="`filter[${index}].rewritePathValue.key`"
                        validate-trigger="input"
                      >
                        <a-input
                          v-model="filter.rewritePathValue.key"
                          placeholder="正则表达式"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item
                        :field="`filter[${index}].rewritePathValue.value`"
                        validate-trigger="input"
                        hide-label
                      >
                        <a-input
                          v-model="filter.rewritePathValue.value"
                          placeholder="替换为"
                        />
                        <a-popover content="删除">
                          <icon-delete
                            size="22"
                            :style="{ marginLeft: '10px', color: 'red' }"
                            @click="handleDeleteFilter(index)"
                          />
                        </a-popover>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
      </template>
    </AdvancedFormModal>
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { Message, Notification } from '@arco-design/web-vue';
  import {
    queryRouteRecordList,
    addRouteRecord,
    editRouteRecord,
    deleteRouteRecord,
  } from '@/api/system/route';
  import { ref, onMounted, reactive } from 'vue';
  import AdvancedSearch from '@/common/components/cac-components/advanced-search/index.vue';
  import AdvancedDrawer from '@/common/components/cac-components/advanced-drawer/index.vue';
  import AdvancedFormModal from '@/common/components/cac-components/advanced-form-modal/index.vue';
  import QuickCopyToolTip from '@/common/components/cac-components/quickcopy-tooltip/index.vue';
  import { Pagination } from '@/types/global';
  import { RouteParams, RouteRecord } from '@/api/system/model/routeModel';

  /**
   * const
   */
  // 条件名称下拉框选项
  const predicatesNameOptions = [
    { label: '路径', value: 'Path' },
    { label: '指定日期之前', value: 'Before' },
    { label: '指定日期之后', value: 'After' },
    { label: '指定日期之间', value: 'Between' },
    { label: 'Cookie', value: 'Cookie' },
    { label: '请求头', value: 'Header' },
    { label: 'Host', value: 'Host' },
    { label: '请求方法', value: 'Method' },
    { label: 'Query', value: 'Query' },
    { label: '请求IP', value: 'RemoteAddr' },
  ];
  // HTTP请求方法下拉框选项
  const httpMethodOptions = [
    { label: 'GET', value: 'GET' },
    { label: 'POST', value: 'POST' },
  ];
  // 过滤器名称下拉框选项
  const filtersNameOptions = [
    { label: '添加请求参数', value: 'AddRequestParameter' },
    { label: '添加请求头', value: 'AddRequestHeader' },
    // { label: '添加响应参数', value: '' },
    { label: '添加响应头', value: 'AddResponseHeader' },
    { label: '维持Host头', value: 'PreserveHostHeader' },
    { label: '重写请求路径', value: 'RewritePath' },
    /* { label: '路由添加前缀', value: '' },
    { label: '截断的路径', value: '' }, */
  ];
  /**
   * data
   */
  // 表格
  const tbData = ref<RouteRecord[]>([]);
  const tbCols = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      fixed: 'left',
      width: 60,
      render: (row: any) => row.rowIndex + 1,
    },
    {
      title: '路由名称',
      dataIndex: 'id',
      fixed: 'left',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'quickCopyToolTip',
    },
    /* { title: '查看', fixed: 'left', align: 'center', width: 100, slotName: 'detail' }, */
    {
      title: '条件',
      dataIndex: 'predicates',
      width: 150,
      align: 'center',
      ellipsis: true,
      tooltip: true,
      slotName: 'predicates',
    },
    {
      title: '过滤器',
      dataIndex: 'filters',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'filters',
    },
    {
      title: 'uri',
      dataIndex: 'uri',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'quickCopyToolTip',
    },
    {
      title: 'metadata',
      dataIndex: 'metadata',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'metadata',
    },
    {
      title: '排序',
      dataIndex: 'order',
      width: 150,
      ellipsis: true,
      align: 'center',
      tooltip: true,
      slotName: 'quickCopyToolTip',
    },
    {
      title: '操作',
      align: 'center',
      fixed: 'right',
      width: 120,
      slotName: 'operation',
    },
  ];
  const searchRef = ref<any>();
  const addModalRef = ref<any>();
  const showDrawerRef = ref<any>();
  const editModalRef = ref<any>();
  const currentRecord = ref<RouteRecord>(); // 记录当前选择的表格行
  const tbLoading = ref<boolean>(false);
  const predicatesForm = reactive({
    // 条件动态表单
    predicate: [
      {
        type: '', // 条件类型
        pathValue: '',
        beforeValue: '',
        afterValue: '',
        betweenValue: [] as string[],
        cookieValue: { key: '', value: '' },
        headerValue: { key: '', value: '' },
        hostValue: '',
        methodValue: [],
        queryValue: { key: '', value: '' },
        remoteAddrValue: '',
      },
    ],
  });
  const filtersForm = reactive({
    // 过滤器动态表单
    filter: [
      {
        type: '', // 过滤器类型
        addRequestParameterValue: { key: '', value: '' },
        addRequestHeaderValue: { key: '', value: '' },
        addResponseHeaderValue: { key: '', value: '' },
        preserveHostHeaderValue: '',
        rewritePathValue: { key: '', value: '' },
      },
    ],
  });
  // 勾选框
  const selectedKeys = ref([]);
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  // 分页，默认第1页，每页10条
  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    showPageSize: true,
    showTotal: true,
  };
  const pagination = reactive({
    ...basePagination,
  });
  // 搜索项配置
  const searchItemList = [
    { type: 'text', labelText: '路由名称', fieldName: 'id' },
  ];
  // 新增弹窗配置项
  const addModalConfig = [
    { type: 'text', labelText: '路由名称', fieldName: 'id' },
    { type: 'text', labelText: 'uri', fieldName: 'uri' },
    {
      type: 'number',
      labelText: '排序',
      fieldName: 'order',
      min: 0,
    },
    { type: 'text', labelText: 'metadata', fieldName: 'metadata' },
    { span: 24, type: 'other', labelText: '', fieldName: 'predicates' },
    { span: 24, type: 'other', labelText: '', fieldName: 'filters' },
  ];
  // 修改弹窗配置项
  const editModalConfig = [
    { type: 'text', labelText: '路由名称', fieldName: 'id' },
    { type: 'text', labelText: 'uri', fieldName: 'uri' },
    {
      type: 'number',
      labelText: '排序',
      fieldName: 'order',
      min: 0,
    },
    { type: 'text', labelText: 'metadata', fieldName: 'metadata' },
    { span: 24, type: 'other', labelText: '', fieldName: 'predicates' },
    { span: 24, type: 'other', labelText: '', fieldName: 'filters' },
  ];
  // 弹窗表单项校验配置
  const advancedModalRules = ref({
    id: [{ required: true, message: '请输入路由名称' }],
    uri: [{ required: true, message: '请输入uri' }],
    // metadata: [{ required: true, message: '请输入metadata' }],
    order: [{ required: true, message: '请输入排序' }],
  });
  // 路由详情弹窗配置项
  const showDrawerConfig = [
    /* { type: 'text', labelText: '', fieldName: 'id'}, */
    { col: 24, type: 'text', labelText: '路由编码', fieldName: 'paramCode' },
    { col: 24, type: 'text', labelText: '路由值', fieldName: 'paramValue' },
    { col: 24, type: 'text', labelText: '备注', fieldName: 'remark' },
    /* { type: 'text', labelText: '所属部门ID(非必须)', fieldName: 'deptId'},
    { type: 'text', labelText: '所属组织机构ID(非必须)', fieldName: 'orgId'},
    { type: 'text', labelText: '创建者', fieldName: 'creator'},
    { type: 'text', labelText: '创建时间', fieldName: 'createTime'},
    { type: 'text', labelText: '更新者', fieldName: 'updater'},
    { type: 'text', labelText: '更新时间', fieldName: 'updateTime'},
    { type: 'text', labelText: '更新ip', fieldName: 'updateIp'},
    { type: 'text', labelText: '是否删除(非必须)', fieldName: 'deleted'},
    { type: 'text', labelText: '数据密级(非必须)(0:公开,5内部,6秘密,7机密,8绝密)', fieldName: 'secretLevel'},
    { type: 'text', labelText: '乐观锁', fieldName: 'version'}, */
  ];
  /**
   * func
   */
  /**
   * @method
   * @description 获取表格数据
   */
  const getTbDataByPage = async (id = '') => {
    tbLoading.value = true;
    selectedKeys.value = [];
    try {
      const { data } = await queryRouteRecordList(id);
      tbData.value = data;
      pagination.total = Number(data.length); // 用Number函数转一下，否则f12控制台会有警告，很不好看
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      tbLoading.value = false;
    }
  };
  /**
   * @method
   * @description 按条件搜索 这个接口只支持按路由名称(id)搜索
   */
  const searchByParams = (params: RouteParams) => {
    getTbDataByPage(params.id);
  };
  /**
   * @method
   * @description 页码发生变化触发
   */
  const onPageChange = (current: number) => {
    pagination.current = current;
    // searchRef.value.handleSubmit(); // 与搜索结果保持一致
  };
  /**
   * @method
   * @description 数据条数发生变化触发
   */
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    // searchRef.value.handleSubmit(); // 与搜索结果保持一致
  };
  /**
   * @description 毫秒数转换成YYYY-MM-DD HH:mm:ss
   * @param millisecondDate 毫秒数据
   */
  const mllisecondDateToDate = (millisecondDate: string) => {
    return dayjs(Number(millisecondDate)).format('YYYY-MM-DD HH:mm:ss');
  };
  /**
   * @description YYYY-MM-DD HH:mm:ss转换成毫秒数
   * @param date YYYY-MM-DD HH:mm:ss数据
   */
  const dateToMillisecondDate = (date: string) => {
    return dayjs(date).valueOf();
  };
  /**
   * @description 根据predicatesForm的值构造predicates参数，接口需要用它
   */
  const generatePredicatesParams = () => {
    const predicates = [] as any[];
    predicatesForm.predicate.forEach((item: any) => {
      const name = item.type;
      const args = {} as any;
      let index = 0;
      if (item.type === 'Path' && item.pathValue !== '') {
        item.pathValue.split(',').forEach((elem: string) => {
          args[`_genkey_${index}`] = elem;
          index += 1;
        });
      }
      if (item.type === 'Before' && item.beforeValue !== '') {
        item.beforeValue.split(',').forEach((elem: string) => {
          args[`_genkey_${index}`] = dateToMillisecondDate(elem);
          index += 1;
        });
      }
      if (item.type === 'After' && item.afterValue !== '') {
        item.afterValue.split(',').forEach((elem: string) => {
          args[`_genkey_${index}`] = dateToMillisecondDate(elem);
          index += 1;
        });
      }
      if (item.type === 'Between' && item.betweenValue !== '') {
        item.betweenValue
          .toString()
          .split(',')
          .forEach((elem: string) => {
            args[`_genkey_${index}`] = dateToMillisecondDate(elem);
            index += 1;
          });
      }
      if (
        item.type === 'Cookie' &&
        item.cookieValue.key !== '' &&
        item.cookieValue.value !== ''
      ) {
        args[`_genkey_${index}`] = item.cookieValue.key;
        index += 1;
        args[`_genkey_${index}`] = item.cookieValue.value;
      }
      if (
        item.type === 'Header' &&
        item.headerValue.key !== '' &&
        item.headerValue.value !== ''
      ) {
        args[`_genkey_${index}`] = item.headerValue.key;
        index += 1;
        args[`_genkey_${index}`] = item.headerValue.value;
      }
      if (item.type === 'Host' && item.hostValue !== '') {
        item.hostValue.split(',').forEach((elem: string) => {
          args[`_genkey_${index}`] = elem;
          index += 1;
        });
      }
      if (item.type === 'Method' && item.methodValue !== '') {
        item.methodValue
          .toString()
          .split(',')
          .forEach((elem: string) => {
            args[`_genkey_${index}`] = elem;
            index += 1;
          });
      }
      if (
        item.type === 'Query' &&
        item.queryValue.key !== '' &&
        item.queryValue.value !== ''
      ) {
        args[`_genkey_${index}`] = item.queryValue.key;
        index += 1;
        args[`_genkey_${index}`] = item.queryValue.value;
      }
      if (item.type === 'RemoteAddr' && item.remoteAddrValue !== '') {
        item.remoteAddrValue.split(',').forEach((elem: string) => {
          args[`_genkey_${index}`] = elem;
          index += 1;
        });
      }
      if (index !== 0) {
        predicates.push({
          name,
          args,
        });
      }
    });
    return predicates;
  };
  /**
   * @description 根据filtersForm的值构造filters参数，接口需要用它
   */
  const generateFiltersParams = () => {
    const filters = [] as any[];
    filtersForm.filter.forEach((item: any) => {
      const name = item.type;
      const args = {} as any;
      let index = 0;
      if (
        item.type === 'AddRequestParameter' &&
        item.addRequestParameterValue.key !== '' &&
        item.addRequestParameterValue.value !== ''
      ) {
        args[`_genkey_${index}`] = item.addRequestParameterValue.key;
        index += 1;
        args[`_genkey_${index}`] = item.addRequestParameterValue.value;
      }
      if (
        item.type === 'AddRequestHeader' &&
        item.addRequestHeaderValue.key !== '' &&
        item.addRequestHeaderValue.value !== ''
      ) {
        args[`_genkey_${index}`] = item.addRequestHeaderValue.key;
        index += 1;
        args[`_genkey_${index}`] = item.addRequestHeaderValue.value;
      }
      if (
        item.type === 'AddResponseHeader' &&
        item.addResponseHeaderValue.key !== '' &&
        item.addResponseHeaderValue.value !== ''
      ) {
        args[`_genkey_${index}`] = item.addResponseHeaderValue.key;
        index += 1;
        args[`_genkey_${index}`] = item.addResponseHeaderValue.value;
      }
      if (item.type === 'PreserveHostHeader') {
        // 维持Host头比较特殊，他不需要输入值，我们直接index++跳过
        index += 1;
      }
      if (
        item.type === 'RewritePath' &&
        item.rewritePathValue.key !== '' &&
        item.rewritePathValue.value !== ''
      ) {
        args[`_genkey_${index}`] = item.rewritePathValue.key;
        index += 1;
        args[`_genkey_${index}`] = item.rewritePathValue.value;
      }
      if (index !== 0) {
        filters.push({
          name,
          args,
        });
      }
    });
    return filters;
  };
  /**
   * @description 相同类型检查
   */
  const checkSame = () => {
    let predicateSame = false;
    let filterSame = false;
    const predicatesTypes = [] as any[];
    const filterTypes = [] as any[];
    predicatesForm.predicate.forEach((item: any) => {
      if (
        item.type !== '' &&
        predicatesTypes.toString().indexOf(item.type) !== -1
      ) {
        predicateSame = true;
      }
      predicatesTypes.push(item.type);
    });
    filtersForm.filter.forEach((item: any) => {
      if (
        item.type !== '' &&
        filterTypes.toString().indexOf(item.type) !== -1
      ) {
        filterSame = true;
      }
      filterTypes.push(item.type);
    });
    if (filterSame) {
      Message.warning('过滤器类型有重复！无法提交');
    }
    if (predicateSame) {
      Message.warning('predicate类型有重复！无法提交');
    }
    return filterSame || predicateSame;
  };
  /**
   * @method
   * @description 新增弹窗提交
   */
  const addModalSubmit = async (reqdata: any) => {
    if (!checkSame()) {
      reqdata.predicates = generatePredicatesParams();
      reqdata.filters = generateFiltersParams();
      reqdata.metadata = { remark: reqdata.metadata || '' }; // 后端接口要求用json格式，否则报错
      console.log(reqdata);
      try {
        const res = (await addRouteRecord(reqdata)) as any;
        console.log(res);
        if (res.code === 200) {
          Notification.success({
            content: '保存成功！',
          });
          addModalRef.value.close();
        } else {
          Notification.error({
            title: '保存失败！',
            content: res.message,
          });
        }
      } catch (error) {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        Notification.error({
          content: `出现异常！${error}`,
          closable: true,
        });
      } finally {
        searchRef.value.handleSubmit(); // 与搜索结果保持一致
      }
    }
  };
  /**
   * @method
   * @description 修改弹窗提交
   */
  const editModalSubmit = async (reqdata: any) => {
    if (!checkSame()) {
      reqdata.predicates = generatePredicatesParams();
      reqdata.filters = generateFiltersParams();
      reqdata.metadata = { remark: reqdata.metadata || '' }; // 后端接口要求用json格式，否则报错
      console.log(reqdata);
      try {
        const res = (await editRouteRecord(reqdata)) as any;
        console.log(res);
        if (res.code === 200) {
          Notification.success({
            content: '修改成功！',
          });
          editModalRef.value.close();
        } else {
          Notification.error({
            title: '修改失败！',
            content: res.message,
          });
        }
      } catch (error) {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        Notification.error({
          content: `出现异常！${error}`,
          closable: true,
        });
      } finally {
        searchRef.value.handleSubmit(); // 与搜索结果保持一致
      }
    }
  };
  /**
   * @method
   * @description 删除路由信息
   */
  const deleteTbData = async (id: string) => {
    try {
      const res = (await deleteRouteRecord(id)) as any;
      console.log(res);
      if (res.code === 200) {
        Notification.success({
          content: '删除成功！',
        });
      } else {
        Notification.error({
          title: '删除失败！',
          content: res.message,
        });
      }
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      searchRef.value.handleSubmit(); // 与搜索结果保持一致
    }
  };
  /**
   * @method
   * @description 批量删除路由信息，传id数组，支持批量
   */
  /* const deleteTbDataList = async (ids: string[]) => {
    try {
      const res = (await deleteRouteRecord(ids)) as any;
      console.log(res);
      if (res.code === 200) {
        Notification.success({
          content: '删除成功！',
        });
      } else {
        Notification.error({
          title: '删除失败！',
          content: res.message,
        });
      }
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
      });
    } finally {
      searchRef.value.handleSubmit(); // 与搜索结果保持一致
    }
  }; */
  /**
   * @description 重置一下两个动态表单
   */
  const resetForm = () => {
    // 条件动态表单重置一下
    predicatesForm.predicate = [
      {
        type: '', // 条件类型
        pathValue: '',
        beforeValue: '',
        afterValue: '',
        betweenValue: [],
        cookieValue: { key: '', value: '' },
        headerValue: { key: '', value: '' },
        hostValue: '',
        methodValue: [],
        queryValue: { key: '', value: '' },
        remoteAddrValue: '',
      },
    ];
    // 过滤器动态表单重置一下
    filtersForm.filter = [
      {
        type: '', // 过滤器类型
        addRequestParameterValue: { key: '', value: '' },
        addRequestHeaderValue: { key: '', value: '' },
        addResponseHeaderValue: { key: '', value: '' },
        preserveHostHeaderValue: '',
        rewritePathValue: { key: '', value: '' },
      },
    ];
  };
  /**
   * @description 根据传入的record渲染动态表单
   * @param record
   */
  const initForm = (record: RouteRecord) => {
    // 先清空一下动态表单的历史数据
    predicatesForm.predicate = [] as any[];
    filtersForm.filter = [] as any[];
    if (record.predicates?.length !== 0) {
      // 条件动态表单渲染一下
      record.predicates?.forEach((item: any) => {
        const predicatesFormValue = {
          type: item.name, // 条件类型
          pathValue: '',
          beforeValue: '',
          afterValue: '',
          betweenValue: [] as string[],
          cookieValue: { key: '', value: '' },
          headerValue: { key: '', value: '' },
          hostValue: '',
          methodValue: [],
          queryValue: { key: '', value: '' },
          remoteAddrValue: '',
        };
        if (item.name === 'Path') {
          predicatesFormValue.pathValue = Object.values(item.args).toString();
        }
        if (item.name === 'Before') {
          predicatesFormValue.beforeValue = mllisecondDateToDate(
            Object.values(item.args).toString()
          );
        }
        if (item.name === 'After') {
          predicatesFormValue.afterValue = mllisecondDateToDate(
            Object.values(item.args).toString()
          );
        }
        if (item.name === 'Between') {
          const mllisecondDateList = Object.values(item.args) as string[];
          predicatesFormValue.betweenValue = [
            mllisecondDateToDate(mllisecondDateList[0]),
            mllisecondDateToDate(mllisecondDateList[1]),
          ]; // 日期范围组件的传参本来就是数组，不需要toString
        }
        if (item.name === 'Cookie') {
          predicatesFormValue.cookieValue.key = Object.values(
            item.args
          )[0] as string;
          predicatesFormValue.cookieValue.value = Object.values(
            item.args
          )[1] as string;
        }
        if (item.name === 'Header') {
          predicatesFormValue.headerValue.key = Object.values(
            item.args
          )[0] as string;
          predicatesFormValue.headerValue.value = Object.values(
            item.args
          )[1] as string;
        }
        if (item.name === 'Host') {
          predicatesFormValue.hostValue = Object.values(item.args).toString();
        }
        if (item.name === 'Method') {
          predicatesFormValue.methodValue = Object.values(item.args);
        }
        if (item.name === 'Query') {
          predicatesFormValue.queryValue.key = Object.values(
            item.args
          )[0] as string;
          predicatesFormValue.queryValue.value = Object.values(
            item.args
          )[1] as string;
        }
        if (item.name === 'RemoteAddr') {
          predicatesFormValue.remoteAddrValue = Object.values(
            item.args
          ).toString();
        }
        predicatesForm.predicate.push(predicatesFormValue);
      });
    }
    // 过滤器动态表单渲染一下
    if (record.filters?.length !== 0) {
      // 条件动态表单渲染一下
      record.filters?.forEach((item: any) => {
        const filtersFormValue = {
          type: item.name, // 过滤器类型
          addRequestParameterValue: { key: '', value: '' },
          addRequestHeaderValue: { key: '', value: '' },
          addResponseHeaderValue: { key: '', value: '' },
          preserveHostHeaderValue: '',
          rewritePathValue: { key: '', value: '' },
        };
        if (item.name === 'PreserveHostHeader') {
          // 维持Host头比较特殊，他本来就是''
          filtersFormValue.preserveHostHeaderValue = '';
        }
        if (item.name === 'AddRequestParameter') {
          filtersFormValue.addRequestParameterValue.key = Object.values(
            item.args
          )[0] as string;
          filtersFormValue.addRequestParameterValue.value = Object.values(
            item.args
          )[1] as string;
        }
        if (item.name === 'AddRequestHeader') {
          filtersFormValue.addRequestHeaderValue.key = Object.values(
            item.args
          )[0] as string;
          filtersFormValue.addRequestHeaderValue.value = Object.values(
            item.args
          )[1] as string;
        }
        if (item.name === 'AddResponseHeader') {
          filtersFormValue.addResponseHeaderValue.key = Object.values(
            item.args
          )[0] as string;
          filtersFormValue.addResponseHeaderValue.value = Object.values(
            item.args
          )[1] as string;
        }
        if (item.name === 'RewritePath') {
          filtersFormValue.rewritePathValue.key = Object.values(
            item.args
          )[0] as string;
          filtersFormValue.rewritePathValue.value = Object.values(
            item.args
          )[1] as string;
        }
        filtersForm.filter.push(filtersFormValue);
      });
    }
  };
  /**
   * @description 打开新增弹窗
   */
  const showAddModal = () => {
    resetForm(); // 打开新增弹窗时重置动态表单
    addModalRef.value.open({
      order: 0,
    });
  };
  /**
   * @description 打开详情弹窗
   * @param record 当前选择的表格行数据
   */
  /* const showDetailDrawer = (record: RouteRecord) => {
    currentRecord.value = record;
    showDrawerRef.value.showDrawer(); // 打开详情弹窗
  }; */
  /**
   * @description 打开修改弹窗
   * @param record 当前选择的表格行数据
   */
  const showEditDrawer = (record: RouteRecord) => {
    currentRecord.value = record;
    initForm(record); // 重置动态表单后把当前record的数据渲染上去
    editModalRef.value.open({
      id: currentRecord.value.id,
      uri: currentRecord.value.uri,
      order: currentRecord.value.order,
      metadata: (currentRecord.value.metadata as any).remark || '',
    }); // 打开修改弹窗
    /* { span: 24, type: 'other', labelText: '', fieldName: 'predicates' },
    { span: 24, type: 'other', labelText: '', fieldName: 'filters' }, */
  };
  /**
   * @description 获取一个简化的条件名称
   * @param predicates
   */
  const getPredicatesName = (predicates: any[]) => {
    let names = '';
    predicates.forEach((item: any) => {
      names = names === '' ? names + item.name : `${names},${item.name}`;
    });
    return names;
  };
  /**
   * @description 获取一个简化的过滤器名称
   * @param filters
   */
  const getFiltersName = (filters: any[]) => {
    let names = '';
    filters.forEach((item: any) => {
      names = names === '' ? names + item.name : `${names},${item.name}`;
    });
    return names;
  };
  /**
   * 添加条件
   */
  const handleAddPredicate = () => {
    predicatesForm.predicate.push({
      type: '',
      pathValue: '',
      beforeValue: '',
      afterValue: '',
      betweenValue: [],
      cookieValue: { key: '', value: '' },
      headerValue: { key: '', value: '' },
      hostValue: '',
      methodValue: [],
      queryValue: { key: '', value: '' },
      remoteAddrValue: '',
    });
  };
  /**
   * @description 删除条件
   * @param index
   */
  const handleDeletePredicate = (index: number) => {
    predicatesForm.predicate.splice(index, 1);
  };
  /**
   * @description 条件名称下拉框变化触发
   * @param val
   * @param index
   */
  /* const predicatesNameSelectChange = (val: string, index: number) => {
    /!* if (val === 'Cookie') {
      predicatesForm.predicate[index].cookieValue.key = '';
      predicatesForm.predicate[index].cookieValue.value = '';
    } *!/
  }; */
  /**
   * 添加过滤器
   */
  const handleAddFilter = () => {
    filtersForm.filter.push({
      type: '',
      addRequestParameterValue: { key: '', value: '' },
      addRequestHeaderValue: { key: '', value: '' },
      addResponseHeaderValue: { key: '', value: '' },
      preserveHostHeaderValue: '',
      rewritePathValue: { key: '', value: '' },
    });
  };
  /**
   * @description 删除过滤器
   * @param index
   */
  const handleDeleteFilter = (index: number) => {
    filtersForm.filter.splice(index, 1);
  };
  /**
   * @description 过滤器名称下拉框变化触发
   * @param val
   * @param index
   */
  /* const filtersNameSelectChange = (val: string, index: number) => {
    console.log(val, index);
    /!* if (val === 'Cookie') {
      /!* filtersForm.filter[index].cookieValue.key = '';
      filtersForm.filter[index].cookieValue.value = ''; *!/
    } *!/
  }; */
  /**
   * onMounted
   */
  onMounted(() => {
    getTbDataByPage();
  });
</script>

<style lang="less" scoped>
  .list-card-container {
    padding: 20px;
    // background-color: var(--color-bg-1);
    border-radius: var(--border-radius-default);
  }
</style>
